<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<script type="text/javascript" src="./common.js"></script>
	<style type="text/css">
		#dv1{
			width: 300px;
			height: 300px;
			background-color: red
		}
		#dv2{
			width: 200px;
			height: 200px;
			background-color: blue
		}
		#dv3{
			width: 100px;
			height: 100px;
			background-color: green
		}

		#dv4{
			width: 300px;
			height: 300px;
			background-color: red
		}
		#dv5{
			width: 200px;
			height: 200px;
			background-color: blue
		}
		#dv6{
			width: 100px;
			height: 100px;
			background-color: green
		}
	</style>
</head>
<body>
<div id="dv1">
	<div id="dv2">
		<div id="dv3">
	
		</div>
	</div>
</div>
<div id="dv4">
	<div id="dv5">
		<div id="dv6">
	
		</div>
	</div>
</div>
</body>
<script type="text/javascript">
	my$("dv3").onclick=function(e){
		console.log("dv3");
		eventMaopao(e);
	}
	my$("dv2").onclick=function(e){
		console.log("dv2");
		eventMaopao(e);
	}
	my$("dv1").onclick=function(e){
		console.log("dv1");
		eventMaopao(e);
	}

	my$("dv4").onclick=function(e){
		console.log("dv4");
		window.event.cancelBubble=true;
	}
	my$("dv5").onclick=function(e){
		console.log("dv5");
		//eventMaopao(e);
	}
	my$("dv6").onclick=function(e){
		console.log("dv6");
		//eventMaopao(e);
	}
</script>
</html>